import React from 'react'
import ReactEcharts from "echarts-for-react";

import styles from './index.less'

export default class CircleProgress extends React.Component {
  getOption = () => {
    const {
      progressColor = 'red',
      progress = 30,
    } = this.props

    return {
      tooltip: {
        show: false
      },
      series: [
        {
          clickable: false,
          type: 'pie',
          legendHoverLink: false,
          radius: ['70%', '90%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: true,
            position: 'center',
            // TODO 通过 rich 更改 https://echarts.apache.org/zh/option.html#series-pie.label.rich
            // rich
            formatter: '{c}%\n完成率',
            textStyle: {
              color: 'black'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: progress,
              itemStyle: {
                color: 'rgba(229, 229, 229, 1)',
              },
            },
            {
              value: 100 - progress,
              itemStyle: {
                color: progressColor
              },
              label: {
                show: false,
              }
            }
          ]
        }
      ]
    }
  }

  render() {
    const {
      // width,
      height = '100%',
    } = this.props

    return (
      <ReactEcharts
        className={styles.echarts}
        style={{
          height,
        }}
        option={this.getOption()}
      />
    )
  }
}